<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM</title>
    <style type="text/css">
#listDisOrder{
    background-color: #ccffff;
}
#listInOrder{
    background-color: #99ccff;
}

    </style>
</head>
<body>

<h2>添加元素</h2>
<input type="text" id="txt1">
<input type="button" id="btn1" value="create">
<ul id="ul1"></ul>


<hr>
<h2>删除元素</h2>
<ul id="ul2">
    <li>aaaa<a href="javascript:void(0)">delete</a></li>
    <li>bbbb<a href="javascript:void(0)">delete</a></li>
    <li>cccc<a href="javascript:void(0)">delete</a></li>
    <li>dddd<a href="javascript:void(0)">delete</a></li>
</ul>


<hr>
<h2>文档碎片</h2>
<ul id="ul3"></ul>

<hr>
<h2>表格</h2>
姓名：<input id="name" type="text">
年龄：<input id="age" type="text">
<input id="btn2" type="button" value="添加">
<br>
姓名：<input id="nameSear" type="text">
<input id="btnSear" type="button" value="搜索">
<input id="btnOrder" type="button" value="排序">

<table id="table1" border="1" width="500">
    <thead>
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
        <tr>
            <td>2</td>
            <td>CGG</td>
            <td>24</td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td>Kathy</td>
            <td>25</td>
            <td></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Hope</td>
            <td>16</td>
            <td></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Jack</td>
            <td>35</td>
            <td></td>
        </tr>
    </tbody>
</table>


<hr>
<h2>排序小demo</h2>
<ul id="listDisOrder">
    <li>4</li>
    <li>2</li>
    <li>3</li>
    <li>1</li>
</ul>
<input id="btnListOrder1" type="button" value="移动到下面">
<input id="btnListOrder2" type="button" value="自身移动">
<input id="btnListOrder3" type="button" value="自身排序">
<ul id="listInOrder"></ul>


<hr>
<h2>表单</h2>
<form id="form" action="http://xx.qq.com">
    用户名：<input type="text" name="user">
    密码： <input type="password" name="pass">
    <input type="submit">
    <input type="reset">
</form>


<script type="text/javascript">

window.onload = function(){


    // 添加元素-------------------------------------------------
    var oBtn = document.getElementById("btn1");
    var oUl = document.getElementById("ul1");
    var oTxt = document.getElementById("txt1");

    oBtn.onclick = function(){
        var oLi = document.createElement("li");
        var aLi = oUl.getElementsByTagName("li");

        oLi.innerHTML = oTxt.value;

        // 在oUl尾部插入
        // oUl.appendChild(oLi);

        // 在oUl头部插入
        // 在IE下报错，应为当oUl为空的时候，也就是要第一次插入的时候，aLi是空的; 所以要做下兼容性判断
        if(aLi.length > 0){
            oUl.insertBefore(oLi, aLi[0]);
        }
        else{
            oUl.appendChild(oLi);
        }
    }



    // 删除元素------------------------------------------------
    var oUl2 = document.getElementById("ul2");
    var aA = oUl2.getElementsByTagName("a");

    for(var i=0; i<aA.length; i++){
        aA[i].onclick = function(){
            oUl2.removeChild(this.parentNode);
        }
    }



    // 文档碎片------------------------------------------------
    var oUl3 = document.getElementById("ul3");
    var oFrag = document.createDocumentFragment();
    // console.time("xx");

    for(var i=0; i<3; i++){
        var oLi = document.createElement("li");
        // oUl3.appendChild(oLi);
        oFrag.appendChild(oLi);
    }
    oUl3.appendChild(oFrag);
    // console.timeEnd("xx");


    // 表格------------------------------------------------
    var oTab = document.getElementById("table1");
    // 常规写法
    var name1 = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[1].innerHTML;
    // 便捷写法
    var name2 = oTab.tBodies[0].rows[1].cells[1].innerHTML;
    console.log(name1,name2);

    console.log(oTab.tBodies[0].rows.length);   // 要把tBodies带上
    console.log(oTab.rows.length);  // 把thead的rows也算上

    var oldColor = "";
    for(var i=0; i<oTab.tBodies[0].rows.length; i++){
        // 鼠标移入，变色
        oTab.tBodies[0].rows[i].onmouseover = function(){
            oldColor = this.style.background;
            this.style.background = "#ffc";
        }
        oTab.tBodies[0].rows[i].onmouseout = function(){
            this.style.background = oldColor;
        }
        // 隔行变色
        if(i % 2){
            oTab.tBodies[0].rows[i].style.background = "#ccc";
        }
    }

    // 表格添加一行
    var oBtn2 = document.getElementById("btn2");
    var oName = document.getElementById("name");
    var OAge = document.getElementById("age");
    var id = oTab.tBodies[0].rows.length + 1;

    oBtn2.onclick = function(){
        // 创建元素
        var oTr = document.createElement("tr");
        var oTd = document.createElement("td");
        oTd.innerHTML = id++;
        oTr.appendChild(oTd);

        var oTd = document.createElement("td");
        oTd.innerHTML = oName.value;
        oTr.appendChild(oTd);

        var oTd = document.createElement("td");
        oTd.innerHTML = OAge.value;
        oTr.appendChild(oTd);

        var oTd = document.createElement("td");
        oTd.innerHTML = "<a href='javascript:void(0)'>删除</a>";
        oTr.appendChild(oTd);

        // 删除事件
        oTd.getElementsByTagName("a")[0].onclick = function(){
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
            // 删除完，隔行变色
            for(var i=0; i<oTab.tBodies[0].rows.length; i++){
                if(i % 2){
                    oTab.tBodies[0].rows[i].style.background = "#ccc";
                }
                else{
                    oTab.tBodies[0].rows[i].style.background = "#fff";
                }
            }
        }

        // 添加到tbody
        oTab.tBodies[0].appendChild(oTr);

        // 添加完，隔行变色
        var i = oTab.tBodies[0].rows.length-1;
        if(i % 2){
            oTab.tBodies[0].rows[i].style.background = "#ccc";
        }
        else{
            oTab.tBodies[0].rows[i].style.background = "#fff";
        }
    }


    // 表格搜索
    var btnSear = document.getElementById("btnSear");
    btnSear.onclick = function(){
        // nameSear : 搜索关键字
        var nameSear = document.getElementById("nameSear").value.toLowerCase();
        // nameSearArr : 用空格分隔搜索关键字
        var nameSearArr = nameSear.split(" ");
        console.log(nameSearArr)

        // 忽略大小写str.toLowercase() & 模糊搜索(str1.search(str2)) & 多关键字搜索
        for(var i=0; i<oTab.tBodies[0].rows.length; i++){
            var nameTab = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
            // 隔行变色
            if(i % 2){
                oTab.tBodies[0].rows[i].style.background = "#ccc";
            }
            else{
                oTab.tBodies[0].rows[i].style.background = "#fff";
            }
            for(var j=0; j<nameSearArr.length; j++){
                if(nameSearArr[j] == ""){
                    continue;
                }
                if(nameTab.search(nameSearArr[j]) != -1){
                    oTab.tBodies[0].rows[i].style.background = "#f9f";
                }
            }

        }
    }

    // 表格排序  --- order by age
    var btnOrder = document.getElementById("btnOrder");
    btnOrder.onclick = function(){
        var arr = [];
        for(var i=0; i<oTab.tBodies[0].rows.length; i++){
            arr[i] = oTab.tBodies[0].rows[i];
        }
        arr.sort(function(tr1, tr2){
            var n1 = parseInt(tr1.cells[2].innerHTML);
            var n2 = parseInt(tr2.cells[2].innerHTML);
            return n1-n2;
        });
        for(var i=0; i<arr.length; i++){
            oTab.tBodies[0].appendChild(arr[i]);
        }
    }



    // 排序小Demo--------------------------------------------------------------
    var listDisOrder = document.getElementById("listDisOrder");
    var listInOrder = document.getElementById("listInOrder");
    var btnListOrder1 = document.getElementById("btnListOrder1");
    var btnListOrder2 = document.getElementById("btnListOrder2");
    var btnListOrder3 = document.getElementById("btnListOrder3");
    btnListOrder1.onclick = function(){
        var oLi = listDisOrder.children[0];
        // listDisOrder.removeChild(oLi);   
        // 这句写不写都无所谓，
        // 父级.appendChild(子节点)   
        // 1、先把子节点从原有父级节点删除
        // 2、然后添加到新的父级末尾
        listInOrder.appendChild(oLi);
    }
    btnListOrder2.onclick = function(){
        var oLi = listDisOrder.children[0];
        listDisOrder.appendChild(oLi);
    }

    btnListOrder3.onclick = function(){
        var aLi = listDisOrder.getElementsByTagName("li");
        // 排序方法一
        /*for(var i=0; i<aLi.length; i++){
            var minLi = aLi[0];
            var minVal = minLi.innerHTML;
            for(var j=1; j<aLi.length-i; j++){
                if(aLi[j].innerHTML < minVal){
                    minLi = aLi[j]
                    minVal = minLi.innerHTML;
                }
            }
            console.log(minVal);
            listDisOrder.appendChild(minLi);
        }*/


        // 排序方法二
        // 直接在aLi.sort() 报错
        // aLi不是严格意义上的数组，而是对象的集合，但是它和数组比较像，有length属性，可以用方括号，除此之外，数组的方法，例如join,sort等，是都无法调用的。 
        // 所以要用数组的sort方法实现排序功能，需要先创建一个空数组arr,遍历循环，把aLi的元素赋值给arr
        var arr = [];
        for(var i=0; i<aLi.length; i++){
            arr[i] = aLi[i];
            // console.log(arr[i].innerHTML);
        }
        arr.sort(function(li1,li2){
            var n1 = li1.innerHTML;
            var n2 = li2.innerHTML;
            return n1-n2;
        });
        console.log(arr);
        for(var i=0; i<arr.length; i++){
            // console.log(arr[i].innerHTML);
            listDisOrder.appendChild(arr[i]);
        }
    }



    // 表单 -------------------------------------------------
    var oForm = document.getElementById("form");
    oForm.onsubmit = function(){
        alert("aaaaa");
    }
    oForm.onreset = function(){
        alert("bbb");
    }

    console.log(oForm.ownerDocument===window.document);

}

</script>
</body>
</html>